<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">  
    <body>  
        <ui:composition template="./structure.xhtml">  
            <ui:define name="content">
                <h:panelGroup rendered="#{!utilisateursMBean.isOnline()}">  
                    <script>document.location="./index.xhtml";</script>
                </h:panelGroup>
                <h:form prependId="false" id="form" rendered="#{utilisateursMBean.isOnline()}">  
                    <p:dataTable var="compte" value="#{comptesMBean.comptes}"
                        rowStyleClass="#{compte.solde le 0.001 ? 'red' : null}">
                        
                        <p:column style="width:32px">  
                            <f:facet name="header">
                            </f:facet>
                            <p:commandButton update=":form:display" oncomplete="histo.show()" image="ui-icon ui-icon-search">  
                                <f:setPropertyActionListener value="#{compte}" target="#{comptesMBean.selectedCompte}" />  
                            </p:commandButton>  
                        </p:column>
                        
                        <p:column style="width:250px">
                            <f:facet name="header">
                                <h:outputText value="Nom" />
                            </f:facet>
                            <h:outputText value="#{compte.titre}" />
                        </p:column>
                        
                        <p:column style="width:150px">
                            <f:facet name="header">
                                <h:outputText value="Numero de compte" />
                            </f:facet>
                            <h:outputText value="#{compte.numero}" />
                        </p:column>

                        <p:column style="width:60px; text-align: right">
                            <f:facet name="header">
                                <h:outputText value="Solde" />
                            </f:facet>
                            <h:outputText value="#{compte.solde}" />
                        </p:column>
                        

                    </p:dataTable>
                    
                    <p:dialog id="display" header="Historique des opérations" widgetVar="histo" showEffect="explode" modal="true" hideEffect="explode">
                        Compte :  #{comptesMBean.selectedCompte.titre}
                        <p:dataTable var="op" value="#{comptesMBean.selectedCompte.operations}">

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Date" />
                                </f:facet>
                                <h:outputText value="#{op.dateoperation}" />
                            </p:column>
                            
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Type" />
                                </f:facet>
                                <h:outputText value="#{op.typeoperation}" />
                            </p:column>

                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Montant" />
                                </f:facet>
                                <h:outputText value="#{op.montant}" />
                            </p:column>
                        </p:dataTable>
                    </p:dialog>
                    
                </h:form>
            </ui:define>  
        </ui:composition>  
    </body>  
</html>  